<template>
  <div>
    <div id="cesium-container" ref="cesium" />
  </div>
</template>

<script>
import * as Cesium from "cesium";
export default {
  name: "DemoVue2CesiumHomeView",

  data() {
    return {
      viewer: null,
    };
  },

  async mounted() {
    await this.init();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 移除监听器，避免内存泄漏
    window.removeEventListener("resize", this.handleResize);
    this.viewer?.destroy();
  },
  methods: {
    handleResize() {
      if (!this.viewer) return;
      this.viewer.scene?.requestRender();
    },
    async init() {
      /*
         imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        }),
         */
      const imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
      });
      //   const imageryProvider = new Cesium.UrlTemplateImageryProvider({
      //     url: "http://127.0.0.1/cesium/map/{z}/{x}/{reverseY}.jpg",
      //     fileExtension: "jpg",
      //   });
      const viewer = new Cesium.Viewer("cesium-container", {
        imageryProvider: imageryProvider,
        shadows: true,
        baseLayerPicker: false, // 底图组件,选择三维数字底图的底图
        geocoder: false, // 地理编码搜索组件
        animation: false, // 动画小组件
        timeline: false, // 时间轴
        infoBox: false, // 禁用 InfoBox 部件
        selectionIndicator: false, // 禁用 SelectionIndicator 部件
        fullscreenButton: false, // 全屏按钮
        skyAtmosphere: false,
        navigationHelpButton: false,
      });
      viewer.scene.debugShowFramesPerSecond = true;
      this.viewer = viewer;
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 去掉logo
      viewer.scene.camera.setView({
        // 默认进入的相机位置
        destination: Cesium.Cartesian3.fromDegrees(120.75, 30.762, 5999999),
      });
      viewer.homeButton.viewModel.command.beforeExecute.addEventListener(
        function (e) {
          e.cancel = true;
          // homeButton 的位置
          viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(120.75, 30.762, 5999999),
          });
        }
      );
      // 移除默认双击追踪
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      );
      viewer.zoomTo(viewer.entities);
    },
  },
};
</script>
<style lang="less" scoped>
#cesium-container {
  width: 100vw;
  height: 100vh;
}
</style>
